<template>
    <div class="right-content">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <!--***********************************************流程定义文件*********************************************************-->
        <el-tab-pane label="流程定义文件" name="undeployed">
        <!-- 头部查询区域 -->
          <el-form :inline="true" :model="dataForm2" class="demo-form-inline">
          <div style="display:inline-block">
            <el-form-item>
              <el-input v-model="dataForm2.id" placeholder="请输入流程编号"></el-input>
            </el-form-item>
            <el-form-item style="right: 100px">
                <el-button type="primary" @click="searchDataList()">查 询</el-button>
                <el-button type="primary" class="defineC" @click="cimsInputClick">定义流程</el-button>
                <el-button type="primary" class="defineC" @click="cimsInputClick2">上传流程</el-button>
            </el-form-item>
          </div>
          </el-form>
          <!-- 内容区域 -->
          <el-table
            class="first"
            ref="multipleTable"
            border
            :data="currentData"
            :header-cell-style="headerStyle"
            :cell-style="cellStyle"
            @selection-change="handleSelectionChange"
          >
                       <!-- v-loading="loading"
             element-loading-text="拼命加载中" -->
            <!-- 复选框 -->
            <!-- <el-table-column
              type="selection"
              width="50"
              header-align="center"
              align="center">
            </el-table-column> -->
            <el-table-column
              type="index"
              fixed
              width="80"
              label="序号"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              width="80"
              label="流程编号"
              prop="id"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="title"
              width="230"
              label="主题"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="workID"
              width="140"
              label="上传人工号"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="description"
              width="220"
              label="主要描述"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="uploadDate"
              width="190"
              label="上传时间"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              width="280"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="primary"  @click="handleLook(scope.row)">查 看</el-button>
                <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button> -->
                <!-- <el-button size="small" type="success" @click="handleDeploy(scope.row)" :disabled="scope.row.deploy == 0">部 署</el-button> -->
                <el-button size="small" type="success" @click="handleDeploy(scope.row)" :disabled="scope.row.deploy ==1?true:false">部&nbsp;署</el-button>
                <!-- <el-button size="small" type="success" disabled v-if="scope.row.deploy == 0">已部署</el-button> -->
                <el-button size="small" type="danger" @click="handleDelete2(scope.row)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top:15px; margin-right: 20px">
            <el-pagination
              align="right"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 8, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
            </el-pagination>
          </div>
          <!-- 弹窗，新增或修改 -->
          <el-dialog
                :title="textMap[dialogStatus]"
                :close-on-click-modal=true
                :visible.sync="dialogFormVisible"
                >
                <el-form
                class="Addform"
                :model="dataForm"
                ref="dataForm"
                @keyup.enter.native="dataFormSubmit()"
                label-width="110px"
                label-position="left"
                style="width: 400px; margin-left: 80px">
                  <div class="right1">
                    <el-row :gutter="15">
                        <el-form-item label="主题" style="width: 370px;" prop="dName" >
                          <el-input v-model="dataForm.title" ></el-input>
                        </el-form-item>
                        <el-form-item label="上传人工号" style="width: 370px;" prop="dClass">
                          <el-input disabled v-model="dataForm.workID" ></el-input>
                        </el-form-item>
                        <el-form-item label="主要描述" style="width: 370px;" prop="dPrice">
                          <el-input v-model="dataForm.description" ></el-input>
                        </el-form-item>
                        <el-form-item label="上传时间" style="width: 370px;" prop="dAmount">
                          <el-input v-model="dataForm.uploadDate" ></el-input>
                        </el-form-item>
                    </el-row>
                  </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogStatus === 'create' ? createData() : lookData()">确定</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                </span>
          </el-dialog>
          <!--弹窗，上传流程文件-->
          <el-dialog
                :title="textMap[dialogStatus]"
                :close-on-click-modal=true
                :visible.sync="dialogFormVisible2"
                 @open="fixUserId">
                <el-form
                :rules="defineRules"
                :model="dataFormUpload"
                class="Addform"
                ref="dataForm"
                @keyup.enter.native="dataFormSubmit()"
                label-width="110px"
                label-position="left"
                style="width: 400px; margin-left: 80px">
                  <el-row :gutter="15">
                  <el-form-item label="主题" style="width: 370px;" prop="title" auto-complete="on">
                    <el-input v-model="dataFormUpload.title" ></el-input>
                  </el-form-item>
                  <el-form-item label="上传人工号" style="width: 370px;" prop="workID" auto-complete="on">
                    <el-input disabled v-model="dataFormUpload.workID" ></el-input>
                  </el-form-item>
                  <el-form-item label="主要描述" style="width: 370px;" prop="description" auto-complete="on">
                    <el-input v-model="dataFormUpload.description" ></el-input>
                  </el-form-item>
                  <el-form-item prop="file">
                    <el-upload
                    ref="upload"
                    class="upload-demo"
                    action="/process/processFile"
                    :data="dataFormUpload"
                    :on-success="upFile"
                    :on-change="getfile"
                    :auto-upload="false"
                    :file-list="fileList"
                    :headers="header">
                      <el-button  slot="trigger" size="small" type="primary">选择文件</el-button>
                      <el-button style="margin-left:5px" size="small" @click="submitForm('dataForm')">保存</el-button>
                      <el-button size="small" @click="resetForm('dataForm')">重置</el-button>
                    </el-upload>
                  </el-form-item>
                </el-row>
                </el-form>
                <!-- <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="submitForm">确定</el-button>
                  <el-button type="primary" @click="dialogFormVisible2 = false">取消</el-button>
                </span> -->
          </el-dialog>
        </el-tab-pane>
        <!--*********************************************已部署的流程*******************************************************************-->
        <el-tab-pane label="已部署的流程" name="deployed">
        <!-- 头部查询区域 -->
          <!-- <el-form :inline="true" :model="dataForm" class="demo-form-inline">
            <el-form-item style="right: 100px">
                <el-button type="primary" class="defineC" @click="cimsInputClick">定义流程</el-button>
                <el-button type="primary" class="defineC" @click="cimsInputClick2">上传流程</el-button>
                <el-button type="primary" v-if="flag===0" @click="handleLookHistory()">已部署的流程</el-button>
                <el-button type="primary" v-else @click="getDataList()">已上传的的流程</el-button>
            </el-form-item>
          </el-form> -->
          <!-- 内容区域 -->
          <el-table
            ref="multipleTable"
            border
            :data="currentData"
            :header-cell-style="headerStyle"
            :cell-style="cellStyle"
            @selection-change="handleSelectionChange"
          >
            <!-- 复选框 -->
            <!-- <el-table-column
              type="selection"
              width="50"
              header-align="center"
              align="center">
            </el-table-column> -->
            <el-table-column
              type="index"
              fixed
              width="80"
              label="序号"
              prop="id"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="deploymentType"
              width="320"
              label="流程类型"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="deployer"
              width="300"
              label="部署人"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="deploymentTime"
              width="360"
              label="部署时间"
              header-align="center"
              align="center">
              <template slot-scope="scope" >
                <span>{{renderTime(scope.row['deploymentTime']) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="165"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <!-- <el-button size="small" type="primary"  @click="handleLook(scope.row)">查 看</el-button> -->
                <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button> -->
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top:15px; margin-right: 20px">
            <el-pagination
              align="right"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 8, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length">
            </el-pagination>
          </div>
          <!-- 弹窗，新增或修改
          <el-dialog
                :title="textMap[dialogStatus]"
                :close-on-click-modal=true
                :visible.sync="dialogFormVisible"
                >
                <el-form
                class="Addform"
                :model="dataForm"
                ref="dataForm"
                @keyup.enter.native="dataFormSubmit()"
                label-width="110px"
                label-position="left"
                style="width: 400px; margin-left: 80px">
                  <div class="right3">
                    <el-row :gutter="15">
                        <el-form-item label="主题" style="width: 370px;" prop="dName" >
                          <el-input v-model="dataForm.title" ></el-input>
                        </el-form-item>
                        <el-form-item label="上传人工号" style="width: 370px;" prop="dClass">
                          <el-input v-model="dataForm.workID" ></el-input>
                        </el-form-item>
                        <el-form-item label="主要描述" style="width: 370px;" prop="dPrice">
                          <el-input v-model="dataForm.description" ></el-input>
                        </el-form-item>
                        <el-form-item label="上传时间" style="width: 370px;" prop="dAmount">
                          <el-input v-model="dataForm.uploadDate" ></el-input>
                        </el-form-item>
                    </el-row>
                  </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogStatus === 'create' ? createData() : lookData()">确定</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                </span>
          </el-dialog> -->
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import { getTime } from '../../utils/common.js'
import axios from 'axios'
// 引入校验规则
import { validatePhone, validateEMail } from '../../utils/documentRules'

export default {
  name: 'Define',
  data() {
    return {
      activeName: 'undeployed',
      tableData: [], // 表格中的数据
      tableData2: [],
      currentData: [], // 当前页面的所有的数据
      multipleSelection: [], // 选定的多个复选框对象,
      options: [{
        value: '设备编号',
        label: '设备编号'
      }, {
        value: '设备名称',
        label: '设备名称'
      }, {
        value: '设备类别',
        label: '设备类别'
      }],
      value: '',
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      dataForm2: {}, // 想要查询的设备数据
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible: false, // 流程定义文件的弹窗可见性
      dialogFormVisible2: false, // 已部署的流程的弹窗可见性
      dataForm: {
        title: '',
        description: '',
        file: ''
      },
      postId: 0, // 存id
      flag: 0,
      dataFormUpload: {
        title: '',
        workID: '',
        description: ''
      },
      fileList: [], // 上传的文件列表
      fileflag: 0,
      authentication: '', // 存token
      user: {}, // 当前登录的用户信息
      defineRules: {
        title: [
          { required: true, message: '主题不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
        // file: [
        //   { required: true, message: '请上传文件', trigger: 'change' }
        // ]
      }
      // disabled: true
    }
  },
  // 生命周期
  mounted(activeName) {
    this.getDataList()
    this.authentication = sessionStorage.getItem('tokenStr')
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
    this.getData()
    // this.getDataList2()
  },
  computed: {
    header() {
      return {
        authentication: this.authentication
      }
    }
  },
  // 页码变化
  // const service = axios.create({
  //   baseURL:'localhost:8080'
  // }),
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    fixUserId() {
      const info = JSON.parse(sessionStorage.getItem('user'))
      // console.log('获取userName')
      // console.log(info)
      this.dataFormUpload.workID = info.workId
    },
    getData() {
      const loading = this.$loading({
        lock: true, // lock的修改符--默认是false
        text: 'Loading', // 显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', // 自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
        target: document.querySelector('#table')// loadin覆盖的dom元素节点
      })
      // 成功回调函数停止加载
      loading.close()
    },
    // 选项卡切换
    handleClick(tab, event) {
      console.log(tab, event)
      if (tab.name === 'undeployed') {
        this.getDataList()
      } else {
        this.getDataList2()
      }
    },
    // 选择每页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //* *********************************************************流程定义文件********************************************************* */
    // 定义流程按钮
    cimsInputClick() {
      // window.location.href = 'src/views/DocumentCirculation/Design2.vue'
      // window.location.href = 'D:/gitee仓库/soft-project（公文流转1）/src/views/DocumentCirculation/Design2.vue'
      this.$router.push('/process/design')
    },
    // 上传流程文件按钮
    cimsInputClick2() {
      this.dialogFormVisible2 = true
    },
    // 上传流程文件相关方法
    upFile(res, file) {
      console.log(res)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fileflag === 0) {
            this.$message.error('请上传文件')
          } else {
            // alert('submit!')
            this.$refs.upload.submit()
            this.dialogFormVisible2 = false
            this.$message.success('上传成功')
            this.getDataList()
            this.fileflag = 0
            this.dataFormUpload.title = ''
            this.dataFormUpload.description = ''
            this.dataFormUpload.workID = ''
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // this.$refs.upload.submit()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    returnValue() {
      return {
        token: sessionStorage.getItem('tokenStr')
      }
    },
    // 获取文件判断是否上传
    getfile(event, file, fileList) {
      console.log(file)
      if (file != null) {
        this.fileflag = 1
      }
    },

    // 获取“流程定义文件”数据列表
    getDataList() {
      this.getRequest('/process/processFile').then((resp) => {
        if (resp) {
          console.log('-------------------------------------------')
          console.log(resp)
          this.tableData = resp.data
          // console.log(this.tableData)
          this.currentData = resp.data
          console.log(this.currentData)
        } else {
          console.log('失败')
        }
      })
    },
    // 查询
    searchDataList(data) {
      this.dataLoading = true
      this.getRequest('process/processFile/' + this.dataForm2.id).then((resp) => {
        if (resp) {
          // console.log('-------------------------------------------')
          console.log(resp)
          this.tableData = resp.data
          console.log(this.tableData)
          this.currentData = resp.data
        } else {
          console.log('查询失败')
        }
      })
      this.dataLoading = false
      // this.getDataList()
    },
    // 查看
    handleLook(data) {
      this.dialogFormVisible = true
      this.dialogStatus = 'look'
      this.postId = data.id
      this.dataForm = data
    },
    lookData() {
      this.putRequest('process/processFile', {
        title: this.dataForm.title,
        workID: this.dataForm.workID,
        description: this.dataForm.description,
        uploadDate: this.dataForm.uploadDate
      }).then((resp) => {
        if (resp) {
          console.log(resp)
          this.$message.success(resp.msg)
          this.getDataList()
        } else {
          console.log('更新失败')
        }
      })
      this.dialogFormVisible = false
    },
    // 部署
    handleDeploy(data) {
      // const tokenStr = sessionStorage.getItem('tokenStr')
      // console.log(tokenStr)
      console.log(this.user.name)
      console.log(2)
      console.log(this.user.name)
      // var username = this.user.name
      // console.log(username)
      // console.log(data.id)

      // axios.get(`/process/deploy/${data.id}/${this.user.name}`, {
      //   params: {
      //     id: data.id,
      //     username: this.user.name
      //   },
      //   headers: {
      //     token: tokenStr
      //   }

      this.getRequest(`/process/deploy/${data.id}/${this.user.name}`).then((resp) => {
        if (resp) {
          console.log(resp)
          this.$message.success(resp.msg)
          data.deploy = 0
          this.getDataList()
        } else {
          console.log('部署失败')
        }
      })
      this.dialogFormVisible = false
      this.getDataList()
    },
    // 删除流程定义文件
    handleDelete2(data) {
      this.$confirm('此操作将永久删除【' + data.title + '】流程的所有信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        var id = data.id
        console.log(id)
        this.deleteRequest(`/process/processFile/${id}`).then((resp) => {
          console.log('-----------------------------删除部署文件--------------------------')
          console.log(resp)
          this.$message.success(resp.msg)
          this.getDataList()
          // this.getDataList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    //* *********************************************************流程定义文件********************************************************* */
    // 已部署的流程文件
    getDataList2() {
      this.getRequest('/process/deploymentInfo').then((resp) => {
        if (resp) {
          // console.log('-------------------------------------------')
          console.log(resp)
          this.tableData = resp.data
          console.log(this.tableData)
          this.currentData = resp.data
          // getTime(this.currentData.deploymentTime)
        } else {
          console.log('失败')
        }
      })
    },
    // // 删除已部署的流程文件
    handleDelete(data) {
      this.$confirm('此操作将永久删除【' + data.deploymentType + '】流程的所有信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        var id = data.deploymentId
        console.log(id)
        this.deleteRequest(`/process/deploymentInfo/${id}`).then((resp) => {
          console.log(resp)
          if (resp.msg === '删除成功') {
            this.$message.success(resp.msg)
          } else {
            this.$message.error(resp.msg)
          }
          // this.$message.success(resp.msg)
          this.getDataList2()
          // this.getDataList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
.right1{
  height: 30
  0px;
}
.right2{
  height: 240px;
}
.right3{
  height: 240px;
}
.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
  margin-top: 5px;
}
.el-table{
  width: 97%;
  margin: 15px auto
}
.first{
  width: 97%;
  margin: 0px auto
}
.el-dialog__body{
  height: 150px !important;
  overflow: auto;
}
</style>
